<template>
  <view class="detail-page">
    <!-- 顶部状态 -->
    <view class="status-section">
      <image class="car-image" src="@/static/order/charing.gif" mode="aspectFit" />
    </view>

    <!-- 充电信息 -->
    <view style="border-radius: 24rpx;background-color: #ffffff;margin: 24rpx;padding-bottom: 12rpx">
      <view class="station-info">
        <text class="station-name">{{ orderInfo.stationName }}</text>
        <text class="device-no">设备编号：{{ orderInfo.deviceNo }}</text>
      </view>

      <!-- 实时数据 -->
      <view class="data-grid">
        <view class="data-item">
          <text class="value">{{ formateTime(orderInfo.chargingTime) }}</text>
          <text class="label">充电时长</text>
        </view>
        <view class="data-item">
          <text class="value">¥{{ orderInfo.fee }}</text>
          <text class="label">充电费用</text>
        </view>
      </view>
    </view>

    <!-- 电压电流 -->
    <view class="data-grid2">
      <view class="data-item">
        <text class="label">电压(V)</text>
        <text class="value">{{ orderInfo.voltage }}V</text>
      </view>
      <view class="data-item" style="margin: 0 24rpx">
        <text class="label">电流(A)</text>
        <text class="value">{{ orderInfo.current }}A</text>
      </view>
      <view class="data-item">
        <text class="label">功率({{ power.unit }})</text>
        <text class="value">{{ power.value  }}{{ power.unit }}</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <button class="stop-button" @click="stopCharging">结束充电</button>
      <view class="tip-text">
        小提示：充电过程中请勿私自拔掉充电口
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        percentage: 0,
        stationName: '',
        deviceNo: '',
        chargingTime: '0',
        fee: '0',
        remainTime: '0',
        voltage: '0',
        current: '0',
        power: '0'
      },
      orderId: '',
      taskId: null
    }
  },
  onLoad(options) {
    this.orderId = options.id
    uni.showLoading({
      title: '加载中...'
    })
    setTimeout(() => {
      this.getOrderDetail()
    },2000)
    // TODO: 调用获取订单详情接口
    this.taskId = setInterval(() => {
      this.getOrderDetail()
    },10000)
  },
  computed: {
    power() {
      let power = Number(this.orderInfo.power || 0)
      if (isNaN(power)) return  {
        value: 0,
        unit: 'KW'
      }
      if (!power) {
        return {
          value: 0,
          unit: 'KW'
        }
      } else {
        if (power >= 1000) {
          return {
            value: (power / 1000).toFixed(2),
            unit: 'KW'
          }
        } else {
          return  {
            value:power,
            unit: 'W'
          }
        }

      }
    },
  },
  methods: {

    formateTime(minutes) {
      if (!minutes) return 0
      if (minutes < 60) {
        return  minutes + '分钟'
      }

      var hours = Math.floor(minutes / 60);
      var remainingMinutes = minutes % 60;
      return hours + "时" + remainingMinutes + "分";
    },
    getOrderDetail() {
      this.$api.getOrderStatus({ orderId: this.orderId }).then(res => {
        this.orderInfo = {
          percentage: res.soc || 0,
          stationName: '',
          deviceNo: '',
          chargingTime: res.haveChargedTime,
          fee: res.chargeMoney,
          voltage: res.chargeVoltage,
          current: res.chargeElectricity,
          power: res.chargePower
        }
        console.log(res)
        if (res.orderChargeStatus === 'CHARGING_COMPLETE') {
          this.closeCharging('充电完成', '/pages/order/completed?id=' + this.orderId, 'redirectTo')
        } else if (res.orderChargeStatus === 'START_FAIL') {
          this.closeCharging('充电失败', '/pages/order/index', 'switchTab')
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    closeCharging(title, url, type) {
      // TODO 提示信息
      clearInterval(this.taskId)
      this.taskId = null
      uni.showToast({
        title
      })
      setTimeout(() => {
        uni[type]({
          url
        })
      },1000)
    },
    stopCharging() {
      uni.showModal({
        title: '提示',
        content: '确定要结束充电吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用结束充电接口
            this.$api.closeOrder({
              id: this.orderId
            }).then(() => {
              uni.showToast({
                title: '已结束充电',
                icon: 'success',
                success: () => {
                  setTimeout(() => {
                    uni.redirectTo({
                      url: '/pages/order/completed?id=' + this.orderId
                    })
                  }, 500)
                }
              })
            })
          }
        }
      })
    }
  },
  onUnload() {
    clearInterval(this.taskId)
    this.taskId = null
  }
}
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: #F3F5F5;
  padding-bottom: calc(88rpx + env(safe-area-inset-bottom));
}

.status-section {
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .progress-circle {
    width: 300rpx;
    height: 300rpx;
    position: relative;

    .circle-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .percentage {
        font-size: 60rpx;
        font-weight: bold;
        color: #333;
        display: block;
      }

      .status-text {
        font-size: 28rpx;
        color: #666;
        margin-top: 8rpx;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 24rpx solid #ffffff;
      border-radius: 50%;
      box-sizing: border-box;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 24rpx solid #1296db;
      border-radius: 50%;
      clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
      transform: rotate(calc(var(--percentage) * 3.6deg - 90deg));
      transform-origin: center;
      box-sizing: border-box;
    }
  }

  .car-image {
    width: 600rpx;
    height: 300rpx;
    margin-top: 40rpx;
  }
}

.station-info {
  background: #FFFFFF;
  padding: 32rpx;
  text-align: center;
  border-radius: 32rpx 32rpx 0 0;
  margin-top: -32rpx;
  position: relative;
  z-index: 1;

  .station-name {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    display: block;
    margin-bottom: 12rpx;
  }

  .device-no {
    font-size: 28rpx;
    color: #999;
  }
}

.data-grid {
  display: flex;
  justify-content: space-between;
  padding: 32rpx;
  margin: 0 12rpx;
  background: #F3F5F5;
  border-radius: 16rpx;

  .data-item {
    flex: 1;
    text-align: center;
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1rpx;
      height: 50%;
      background: rgba(0, 0, 0, 0.06);
    }

    .value {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }

    .label {
      font-size: 24rpx;
      color: #999;
    }
  }
}
.data-grid2 {
  display: flex;
  justify-content: space-between;
  margin: 0 24rpx;
  background: #F3F5F5;
  border-radius: 16rpx;

  .data-item {
    border-radius: 16rpx;
    flex: 1;
    text-align: center;
    position: relative;
    background-color: #ffffff;
    padding: 32rpx;
    .value {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }

    .label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

  .stop-button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #1296db;
    color: #FFFFFF;
    font-size: 32rpx;
    border-radius: 44rpx;
    border: none;

    &:active {
      opacity: 0.8;
    }
  }

  .tip-text {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    margin-top: 24rpx;
  }
}
</style>
